<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="chart-name" content="健康步数">
    <title>F2 图表组件库 - AntV</title>
    <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />
    
</head>
<body>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>

<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script>

<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<!-- 在 PC 上模拟 touch 事件 -->
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>

  <style>
.bkg {
  position: relative;
  width: 100vw;
  height: 1000px;
  background-image: url("https://gw.alipayobjects.com/zos/rmsportal/IiwHbXsOPCXPnjyoTXym.png");
  background-size: cover;
}

.avatar-container {
  position: absolute;
  left: 50%;
  width: 18.666666666666667vw;
  height: 18.666666666666667vw;
  margin-left: -9.333333333333333vw;
  border-radius: 9.333333333333333vw;
  background-color: #fff;
  text-align: center;
  overflow: hidden;
  bottom: -9.333333333333334vw;
}

.avatar {
  width: 13.6vw;
  height: 13.6vw;
  margin-top: 2.66666vw;
}

.chart-container {
  position: relative;
  margin: 12.8vw auto 0;
  height: 53.86666666666667vw;
  background-image: linear-gradient(-135deg, #874BFF 0%, #6854EE 43%, #6052F2 63%, #534FFA 100%);
  border-radius: 1.0666666666666667vw;
  overflow: hidden;
  width: 94.93333333333334vw;
}

.chart-header {
  height: 10.933333333333333vw;
  margin: 0 3.466666666666667vw;
  box-shadow: 0 1px 0 0 #85A5FF;
  line-height: 10.933333333333333vw;
  text-align: left;
  color: #ADC6FF;
  font-size: 5.6vw;
}

canvas#mountNode {
  display: block;
  width: 100%;
  height: 42.4vw;
}

.chart-tooltip {
  position: absolute;
  z-index: 99;
  font-size: 3.2vw;
  color: #ADC6FF;
  text-align: center;
  top: 38vw;
  left: 0;
  margin-top: 3px;
  visibility: hidden;
  transition: top 0.4s cubic-bezier(0.23, 1, 0.32, 1)
}
    body{
    	overflow: auto;
    }
</style>
<div class="bkg">
  <div class="avatar-container">
    <a href="https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html">
      <img class="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/bjtEqXVNIqVCgqhpdHmm.png" alt="antv">
    </a>
  </div>
</div>
<div class="chart-container">
  <div class="chart-header"></div>
  <canvas id="mountNode"></canvas>
  <!-- 自定义 tooltip -->
  <div class="chart-tooltip" id="tooltip"></div>
</div>
<script>
  var data = [{
    date: '2018-04-21',
    steps: 59
  }, {
    date: '2018-04-22',
    steps: 2515
  }, {
    date: '2018-04-23',
    steps: 6524
  }, {
    date: '2018-04-24',
    steps: 26044
  }, {
    date: '2018-04-25',
    steps: 29763
  }, {
    date: '2018-04-26',
    steps: 10586
  }, {
    date: '2018-04-27',
    steps: 14758
  }, {
    date: '2018-04-29',
    steps: 549
  }, {
    date: '2018-04-30',
    steps: 21
  }, {
    date: '2018-05-01',
    steps: 1069
  }, {
    date: '2018-05-02',
    steps: 7918
  }, {
    date: '2018-05-03',
    steps: 5381
  }, {
    date: '2018-05-04',
    steps: 11549
  }, {
    date: '2018-05-06',
    steps: 19461
  }, {
    date: '2018-05-07',
    steps: 22487
  }, {
    date: '2018-05-08',
    steps: 11062
  }, {
    date: '2018-05-09',
    steps: 7101
  }, {
    date: '2018-05-10',
    steps: 12776
  }, {
    date: '2018-05-11',
    steps: 12919
  }, {
    date: '2018-05-12',
    steps: 7216
  }, {
    date: '2018-05-13',
    steps: 4867
  }, {
    date: '2018-05-14',
    steps: 8725
  }, {
    date: '2018-05-15',
    steps: 8983
  }, {
    date: '2018-05-16',
    steps: 22348
  }, {
    date: '2018-05-17',
    steps: 17142
  }, {
    date: '2018-05-18',
    steps: 8715
  }, {
    date: '2018-05-19',
    steps: 3861
  }, {
    date: '2018-05-20',
    steps: 8
  }, {
    date: '2018-05-21',
    steps: 24365
  }, {
    date: '2018-05-22',
    steps: 14271
  }];

  $('.chart-header').text('步数：' + data[data.length - 1].steps);

  var chart = new F2.Chart({
    id: 'mountNode',
    pixelRatio: window.devicePixelRatio,
    padding: [20, 30, 'auto', 'auto']
  });
  chart.source(data, {
    date: {
      type: 'timeCat',
      range: [0, 1],
      mask: 'MM-D'
    },
    steps: {
      ticks: [10000],
      formatter: function formatter(val) {
        return val === 10000 ? '1W' : 0;
      }
    }
  });
  chart.axis('date', {
    line: {
      stroke: '#85A5FF'
    },
    label: function label(text, index, total) {
      var cfg = {
        textAlign: 'center',
        fill: '#85A5FF',
        fontSize: 12,
        fontWeight: 300
      };
      if (index === 0) {
        cfg.textAlign = 'start';
        cfg.text = text.split('-').join('月');
      } else {
        cfg.text = text.split('-')[1];
      }

      if (index === total - 1) {
        cfg.textAlign = 'end';
        cfg.fill = '#ADC6FF';
        cfg.fontWeight = 'normal';
      }

      return cfg;
    }
  });
  chart.axis('steps', {
    position: 'right',
    label: {
      fill: '#CFFFFE',
      fillOpacity: 0.5,
      fontSize: 9,
      fontWeight: 300
    },
    grid: {
      stroke: '#85A5FF'
    }
  });
  chart.tooltip({
    custom: true,
    showCrosshairs: true,
    showTooltipMarker: false,
    crosshairsStyle: {
      lineDash: [2],
      stroke: '#77C0B3'
    },
    onChange: function onChange(e) {
      var item = e.items[0];
      var origin = item.origin;
      var tooltipEl = $('#tooltip');
      tooltipEl.text(origin.steps);
      // 设置 tooltip 位置
      var canvasOffsetTop = $('#mountNode').position().top;
      var canvasOffsetLeft = $('#mountNode').position().left;
      var tooltipWidth = tooltipEl.outerWidth();
      tooltipEl.css({
        visibility: 'visible',
        left: canvasOffsetLeft + item.x - tooltipWidth / 2,
        top: canvasOffsetTop
      });
    },
    onHide: function onHide() {
      var tooltipEl = $('#tooltip');
      tooltipEl.css({
        visibility: 'hidden'
      });
    }
  });
  chart.area().position('date*steps').style({
    fill: 'l(-90) 0.03:rgba(216,216,216,0.10) 1:#6E6CD8',
    fillOpacity: 1
  });
  chart.line().position('date*steps').color('#EFDBFF').size(1.5);
  chart.point().position('date*steps').color('#EED5FF').size(2.5);
  chart.render();
</script>


</body>
</html>
